<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <meta charset="UTF-8">
    <title>芝麻一点通列表</title>
    <meta name="page-view-size" content="1280*720">
    <link rel="stylesheet" href="../css/base.css">
    <!-- <link rel="stylesheet" href="../css/infoList.css"> -->
    <script type="text/javascript" src="../lib/js/evm.js"></script>
    <script type="text/javascript" src="../lib/js/Evm_djyw.js"></script>
    <script type="text/javascript" src="../lib/js/key.js"></script>
    <script src="../lib/js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/api.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .multiLineList-bg {
            width: 1280px;
            height: 720px;
            background: url(../images/bg.png) no-repeat left top;
        }

        .list-bg {
            width: 1121px;
            height: 543px;
            /* background-color: #005595; */
            position: relative;
            top: 132px;
            left: 79px;
            background: rgba(39,79,193,.1);
            border-radius: 10px;
        }

        .list-con {
            padding-top: 10px;
            overflow: hidden;
        }


        .list-row {
            width: 535px;
            height: 93px;
            float: left;
            color: #333;
            box-sizing: border-box;
            border: 3px solid transparent;
            margin: 5px 0px 0px 17px;
            position: relative;
            font-size: 22px;
            border-bottom: 1px dashed white;
        }

        .listImgBar {
            display: block;
            float: left;
            width: 136px;
            height: 76px;
            position: relative;
            margin: 6px 18px 15px 8px;
        }

        .list-img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .list-row .listPlay {
            position: absolute;
            z-index: 555;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, .2)
        }

        .listPlay>img {
            position: absolute;
            display: block;
            height: 40px;
            width: 40px;
            top: 75%;
            left: 50%;
            margin-top: -40px;
            margin-left: -20px;
        }



        .list-row>p:nth-child(2) {
            font-size: 22px;
            line-height: 40px;
        }

        .list-row>p:nth-child(3) {
            font-size: 18px;
            color: white;
            line-height: 24px;
            /* opacity: 0.64; */
            width: 130px;
            position: absolute;
            bottom: 15px;
            left: 165px;
        }

        .list-row>p:nth-child(4) {
            font-size: 18px;
            color: white;
            line-height: 24px;
            /* opacity: 0.64; */
            width: 180px;
            position: absolute;
            bottom: 15px;
            left: 320px;
        }

        .noneData {
            font-size: 55px;
            color: #fff;
            text-align: center;
            line-height: 300px;
            letter-spacing: 10px;
        }

        .list-row.active {
            border: 3px solid lightgreen;
        }
    </style>
</head>

<body>
    <div class="multiLineList-bg" id="multiLineListMain">
        <div class="list-bg">
            <div class="list-con" id="list-con">
            </div>
            <div class="page-show" id="page_show">
                <span id="now_page">0</span>
                /
                <span id="total_page">0</span>
            </div>
        </div>
    </div>

</body>
<script>
    var modelIndex = {
        disUser: true,
        index: 0,//初始位置
        pageSize: 10,
        type: 3,
        rowHeight: 5,
        listName: 'list-row', //模块名称
        containerId: 'list-con'//包含模块的标签id
    }
    var mess = '志愿服务';
    TV.structure(mess)
    function getMessage(page, pageSize, pos, index) {
        var param = {
            page: page,
            pagesize: pageSize,
            cate: TV.GetParam('id'),
            // area_id: $.cookie('TV_CST_AREA'),
            device: 'tv'
        }
        GetDatas('assistList', param, function (err, res) {
            var mess = res.data;
            var str = '';
            console.log(mess.items)
            if (mess.items.length > 0) {
                for (var i = 0; i < mess.items.length; i++) {
                    var img = '';
                    if (mess.items[i].img == '') {
                        img = '../images/base1.jpg'
                    } else {
                        img = API_URL.imgURL + mess.items[i].img
                    }
                    str += "<div class='list-row' data-id=" + mess.items[i].id + " data-tpe=" + mess.items[i].tpe + " >";
                    //通过数组的方式 将所有的对应项都输出来
                    str += '<div class="listImgBar">'
                    str += "<img class='list-img' src=" + img + ">";

                    if (mess.items[i].tpe == 5 || mess.items[i].tpe == 4) {
                        str += "<div class='listPlay' ><img src='../images/play.png'></div>";
                    }
                    str += '</div>'
                    str += "<p class='list-title ell'>" + mess.items[i].team + "</p>";
                    str += "<p class='list-phone ell'>" + mess.items[i].mobile + "</p>";
                    str += "<p class='list-address ell'>" + mess.items[i].title + "</p>";
                    str += "</div>"
                }
            } else {
                str += '<div class="noneData">暂无数据</div>';
                $('#page_show').css('display', 'none');
            }
            $('#list-con').html(str);
            $('#now_page').html(page)
            $('#total_page').html(mess.totalpage)
            right.index = index ? index : pos == 'previous' ? pageSize - 1 : 0;
            right.initialization();
            right.toggleFocus(right.index);


        })
        // right.toggleFocus();
    }



    function direEnter(index) {
        // window.location.href = 'sesameDetail.html?id=' + $('.active').attr('data-id')
        window.location.href = 'diandanDetail.html?id=' + $('.active').attr('data-id')
    }
</script>
<script type="text/javascript" src="../js/pageList.js"></script>

</html>